<html>
    <head>
        <meta charset="utf-8">
        <title>Map:State:Center</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", { 
                    /*crs: L.CRS.EPSG4326,*/
                    center: [39.90, 116.39],
                    zoom: 9
                });

                L.tileLayer( 
                    'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                ).addTo(map);
            }

            function onGetCenterAndZoom()
            {
                //获取地图中心点
                var center = map.getCenter();
                //获取地图显示级别
                var zoom   = map.getZoom();
                //在界面上显示值
                document.getElementById("XY").value = center;
                document.getElementById("zoom").value = zoom;
            }

        </script>
            
    </head>
    <body onload="init()">
        <span>地图中心点和显示级别:</span><br>
        <span>XY:<input id="XY" type="text" value="0.0"></span>
        <span>Zoom:<input id="zoom" type="text" value="0.0"></span>
        <span><input type="button" value="获取center和zoom" onclick="onGetCenterAndZoom()"></span>
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



